<template>
	<div>
		<!-- 弹窗：审批设置 -->
    <el-dialog 
      title="审批设置"
      append-to-body
      :visible.sync="approveSettingDialog"
      :close-on-click-modal="false" 
      :before-close="closeApproveSettingDialog"
      width="60%"
      class="approve_setting_dialog"
    >

      <!-- 内容 -->
      <el-row>
        <el-col :span="24">
          <el-button 
            type="success"
            size="small"  
            icon="el-icon-plus"
            @click="chooseApprovePerson()">
            添加审批人员
          </el-button>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="24">
          <avue-crud 
            :option="approveUserOption"
            :data="approveUserData"
            ref="approveUserCrud"
          >

            <!-- 自定义操作列 -->
            <template slot="menu" slot-scope="scope">
              <el-button 
                :disabled="scope.index === 0"
                type="success"
                size="small"
                icon="el-icon-arrow-up"
                @click="moveUpUser(scope.index)">
                上 移
              </el-button>
              <el-button 
                :disabled="scope.index === approveUserData.length - 1"
                type="warning"
                size="small"
                icon="el-icon-arrow-down"
                @click="moveDownUser(scope.index)">
                下 移
              </el-button>
              <el-button 
                type="danger"
                size="small"
                icon="el-icon-delete"
                @click="removeApproveUser(scope.index)">
                删 除
              </el-button>
            </template>

            <!-- 审核人员标题表格自定义 -->
            <template slot="shryTitle">
              <span style="font-weight: bolder; font-size: 14px;">审核人员：</span>
            </template>

            <!-- 审核人员表格自定义 -->
            <template slot="shry" slot-scope="scope">
              <el-input
                v-model="scope.row['shry']"
                disabled
                size="small">
              </el-input>
            </template>

          </avue-crud>
        </el-col>
      </el-row>

      <!-- 按钮 -->
      <div class="approve_setting_footer">
        <el-button 
          type="primary"
          size="small"
          @click="confirmApproveSetting()">
          确 定
        </el-button>
        <el-button 
          size="small"
          @click="closeApproveSettingDialog()">
          取 消
        </el-button>
      </div>

    </el-dialog>

    <!-- 弹窗：选择审批人员 -->
    <chooseApproveUser
      :chooseApproveUserDialog="chooseApproveUserDialog"
      :selectedUsers="selectedUsers"
      @confirmChooseApproveUser="confirmChooseApproveUser"
      @closeChooseApproveUserDialog="closeChooseApproveUserDialog">
    </chooseApproveUser>

	</div>
</template>

<script>
import { getApproveUserList } from "@/api/basedata/interestedpartymange/relatedparty";
import chooseApproveUser from "./chooseApproveUser";

export default {
  components: {
    chooseApproveUser
  },
  props: {
    approveSettingDialog: {default: false},
    selectedSettingId: {default: ""}
  },
  data() {
    return {
      approveUserData: [],
      approveUserOption: {
        calcHeight: 30,
        tip: false,
        index: true,
        selection: false,
        addBtn: false,
        refreshBtn: false,
        columnBtn: false,
        indexWidth: 30,
        editBtn: false,
        delBtn: false,
        menuWidth: 300,
        index: false,
        column: [
          {
            label: "审核人员标题",
            prop: "shryTitle",
            align: "center",
            slot: true,
            width: 100
          },
          {
            label: "审核人员",
            prop: "shry",
            align: "center",
            slot: true
          }
        ]
      },
      // 弹窗：选择审批人员
      chooseApproveUserDialog: false,
      selectedUsers: []
    }
  },
  watch: {
    approveSettingDialog(){
      if(this.approveSettingDialog === true){
        this.initData();
      }
    }
  },
  mounted() {
    this.initData();
  },
  methods: {

    // 初始化评估历史弹窗
    initData() {
      this.getApprovalUser();
    },

    // 获取审批人员列表
    getApprovalUser() {
      getApproveUserList(this.selectedSettingId).then(res => {
        if(res.data.success) {
          this.approveUserData = this.initApproveUsers(res.data.data);
        }
      });
    },

    // 初始化审批人员
    initApproveUsers(users) {
      var data = [];
      users.forEach(item => {
        data.push({
          id: item.userId,
          realName: item.userName,
          shry: item.userName,
          taskOrder: item.taskOrder
        });
      });
      data.sort(this.sortApproveUser);
      return data;
    },

    // 根据taskOrder排序
    sortApproveUser(ob1, ob2) {
      if (ob1.taskOrder < ob2.taskOrder) {
        return -1;
      } else if (ob1.taskOrder > ob2.taskOrder) {
        return 1;
      } else {
        return 0;
      }
    },

    // 上移审批人员
    moveUpUser(index) {
      let x = index; 
      let y = index + 1;
      this.approveUserData.splice(x - 1, 1, ...this.approveUserData.splice(y - 1, 1, this.approveUserData[x - 1]));
    },

    // 下移审批人员
    moveDownUser(index) {
      let x = index + 1; 
      let y = index + 2;
      this.approveUserData.splice(x - 1, 1, ...this.approveUserData.splice(y - 1, 1, this.approveUserData[x - 1]));
    },

    // 删除审批人员
    removeApproveUser(index) {
      this.$confirm("确定删除该审批人员?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.approveUserData.splice(index, 1);
      });
    },

    // 确定审批设置
    confirmApproveSetting() {
      if(this.approveUserData.length === 0) {
        this.$message.warning("请添加至少一个审批人员!");
        return;
      }
      this.$emit('confirmApproveSetting', this.approveUserData);
      
    },

    // 关闭选择人员弹窗
    closeApproveSettingDialog() {
      this.$emit('closeApproveSettingDialog');
    },

    /**
     * 弹窗：选择审批人员
    */

    // 打开选择审批人员弹窗
    chooseApprovePerson() {
      this.selectedUsers = this.approveUserData;
      this.chooseApproveUserDialog = true;
    },

    // 确定选择审批人员
    confirmChooseApproveUser(userList) {
      this.approveUserData = [];
      for(let i = 0 ; i < userList.length ; i++) {
        let item = userList[i];
        let selectUser = {};
        for(var key in item) {
          selectUser[key] = item[key];
        }
        selectUser["shry"] = item.realName;
        this.approveUserData.push(selectUser);
      }
      this.closeChooseApproveUserDialog();
    },

    // 关闭、取消选择审批人员弹窗
    closeChooseApproveUserDialog() {
      this.selectedUsers = [];
      this.chooseApproveUserDialog = false;
    }

  }
}
</script>

<style lang="scss" scoped>
.approve_setting_footer {
  text-align: center;
  margin-top: 15px;

  .el-button {
    width: 100px;
    height: 35px;
  }
}
</style>